Animations via SVG

This animation utilizes a SVG library, built for simplifying SVG and animations. The library is built by Graphery SVG. The animation implemented is a simple clock face that shows the current time per the computer.

First the gySVG library is imported. Then we configure the viewbox and create the graph. Then we draw a circle and add it to the viewbox. Hour and minute marks are created next. They are placed every 6°. Next we need a text label for every hour. Next we create the three clock hands with add('polygon').

Finally, we animate the hands. This is done with setInterval where .transform('rotate') is called for each of the hands.




Display an SVG Clock